<template>
  <div :id="id" :style="{height:height,width:width}"></div>
</template>

<script>
import resize from '@/utils/resize'
export default {
    mixins: [resize],
    data () {
      return {
        chart: null,
        data: [],
        inter: null
      }
    },
    props: {
        id: {
            type: String,
            default: ''
        },
        width: {
            type: String,
            default: ''
        },
        height: {
            type: String,
            default: ''
        }
    },
    beforeDestroy() {
      if (!this.chart) {
      return
      }
      this.chart.dispose()
      clearInterval(this.inter)
      this.chart = null
    },
    mounted () {
      this.chart = this.$echarts.init(document.getElementById(this.id))
      this.mapChart()
    //   this.chart.on('click', this.chartClick)
    },
    activated () {

    },
    methods: {
      mapChart () {
          const province = require('@/utils/mock/json/world.json')
          this.$echarts.registerMap('world', province)
          this.registerAndsetOption(this.chart)
      },
      registerAndsetOption: function (myChart) {
        var geoCoordMap = {
                上海: [121.4648, 31.2891],
                尼日利亚: [-4.388361, 11.186148],
                美国洛杉矶: [-118.24311, 34.052713],
                香港邦泰: [114.195466, 22.282751],
                美国芝加哥: [-87.801833, 41.870975],
                加纳库马西: [-4.62829, 7.72415],
                英国曼彻斯特: [-1.657222, 51.886863],
                德国汉堡: [10.01959, 54.38474],
                哈萨克斯坦阿拉木图: [45.326912, 41.101891],
                俄罗斯伊尔库茨克: [89.116876, 67.757906],
                巴西: [-48.678945, -10.493623],
                埃及达米埃塔: [31.815593, 31.418032],
                西班牙巴塞罗纳: [2.175129, 41.385064],
                柬埔寨金边: [104.88659, 11.545469],
                意大利米兰: [9.189948, 45.46623],
                乌拉圭蒙得维的亚: [-56.162231, -34.901113],
                莫桑比克马普托: [32.608571, -25.893473],
                阿尔及利亚阿尔及尔: [3.054275, 36.753027],
                阿联酋迪拜: [55.269441, 25.204514],
                匈牙利布达佩斯: [17.108519, 48.179162],
                澳大利亚悉尼: [150.993137, -33.675509],
                美国加州: [-121.910642, 41.38028],
                澳大利亚墨尔本: [144.999416, -37.781726],
                墨西哥: [-99.094092, 19.365711],
                加拿大温哥华: [-123.023921, 49.311753]
            };
        this.data = [
            [{name:'墨西哥'},{name:'加拿大温哥华',value:2}],
            [{name:'加拿大温哥华'},{name:'澳大利亚悉尼',value:3}],
            [{name:'澳大利亚悉尼'},{name:'阿联酋迪拜',value:4}]
        ]
        var data_ = [
            [{name:'尼日利亚'}, {name:'墨西哥',value:1}],
            [{name:''}, {name:'尼日利亚',value:0}]
    	];
        var convertData = function (data) {
    	    var res = [];
    	    for (var i = 0; i < data.length; i++) {
    	        var dataItem = data[i];
    	        var fromCoord = geoCoordMap[dataItem[0].name];
    	        var toCoord = geoCoordMap[dataItem[1].name];
    	        if (fromCoord && toCoord) {
    	            res.push({
    	                fromName: dataItem[0].name,
    	                toName: dataItem[1].name,
    	                coords: [fromCoord, toCoord],
                        value: dataItem[1].value,
                        visualMap:false
    	            });
    	        }
    	    }
    	    return res;
    	};
        
        var series = [];
        let that = this
        let n = 0
        fn(data_)
        timer()
        function timer (){
            that.inter = setInterval(function(){
                n++
                if(n>that.data.length) {
                    clearInterval(that.inter)
                    setTimeout(function(){
                        myChart.clear()
                        n=0
                        series = []
                        fn(data_)
                        timer()
                    },5000)
                }else{
                    let arr = []
                    arr.push(that.data[n-1])
                    fn(arr)
                }
                
            },4000)
        }
        
        function fn(arr){
            [["", arr]].forEach(function(item, i) {
                series.push(
                    {
                        type: "lines",
                        zlevel: 2,
                        effect: {
                            show: true,
                            period: 3, //箭头指向速度，值越小速度越快
                            trailLength: 0.41, //特效尾迹长度[0,1]值越大，尾迹越长重
                            symbol: "arrow", //箭头图标
                            symbolSize: 10 ,//图标大小
                            color:'orange',
                            loop: false
                        },
                        lineStyle: {
                            color: 'white',
                            normal: {
                                color: '#CC8936',
                                width: 1,
                                opacity: 0.2,
                                curveness: 0.1 // 边的弧度
                            }
                        },
                        data: convertData(item[1])
                    },
                    {
                        name: '点',
                        type: 'scatter',
                        coordinateSystem: 'geo',
                        symbol: 'pin',
                        symbolSize: function (val) {
                            return 50;
                        },
                        label: {
                            normal: {
                                formatter: function(val){
                                    return val.data.value[2]
                                },
                                show: true,
                                color: '#CC8936',
                                textStyle: {
                                    color: '#fff',
                                    fontSize: 9,
                                }
                            }
                        },
                        itemStyle: {
                            color: '#CC8936', //标志颜色
                        },
                        zlevel: 2,
                        data: item[1].map(function (dataItem) {
                            return {
                                name: dataItem[1].name,
                                value: geoCoordMap[dataItem[1].name].concat([dataItem[1].value]),
                                visualMap:false
                            };
                        })
                    },
                    {
                        type: "effectScatter",
                        coordinateSystem: "geo",
                        zlevel: 1,
                        rippleEffect: {
                            //涟漪特效
                            period: 4, //动画时间，值越小速度越快
                            brushType: "stroke", //波纹绘制方式 stroke, fill
                            scale: 1 //波纹圆环最大限制，值越大波纹越大
                        },
                        symbol: "circle",
                        symbolSize: function(val) {
                            return 10; //圆环大小
                        },
                        itemStyle: {
                            normal: {
                                color: '#29B5FF', //标志颜色
                                borderColor: '#fff'
                            },
                            emphasis: {
                                areaColor: 'orange'
                            }
                        },
                        label: {
                            normal: {
                                show: true,
                                position: "right", //显示位置
                                offset: [5, 0], //偏移设置
                                formatter: "{b}" //圆环显示文字
                            },
                            emphasis: {
                                show: true
                            }
                        },
                        data: item[1].map(function (dataItem) {
                            return {
                                name: dataItem[1].name,
                                value: geoCoordMap[dataItem[1].name].concat([dataItem[1].value]),
                                visualMap:false
                            };
                        })
                    }
                );
            });
            var pro = {
                backgroundColor: '#fff',
                title: {
                    text: '',
                    left: 'center',
                    textStyle: {
                        color: '#fff'
                    }
                },
                tooltip: {
                    trigger: "item",
                    backgroundColor: "#1540a1",
                    borderColor: "#FFFFCC",
                    showDelay: 0,
                    hideDelay: 0,
                    enterable: true,
                    transitionDuration: 0,
                    extraCssText: "z-index:100",
                    formatter: function(params, ticket, callback) {
                        //根据业务自己拓展要显示的内容
                        var res = "";
                        var name = params.name;
                        var value = params.value[params.seriesIndex + 1];
                        res =
                            "<span style='color:#fff;'>" +
                            name +
                            "</span><br/>数据：" +
                            value;
                        return res;
                    }
                },
                visualMap: {
                    //图例值控制
                    min: 0,
                    max: 10000,
                    show: false,
                    calculable: true,
                
                    /* color: ['orange'],
                    textStyle: {
                        color: "#fff"
                    },
                    areaColor:'#004981' */
                },
                geo: {
                    map: "world",
                    label: {
                        emphasis: {
                            show: false
                        }
                    },
                    roam: true, //是否允许缩放
                    layoutCenter: ["50%", "50%"], //地图位置
                    layoutSize: "180%",
                    itemStyle: {
                        normal: {
                            areaColor: '#edf0f4',
                            borderColor: '#fff'
                        },
                        // emphasis: {
                        //     areaColor: '#edf0f4'
                        // }
                    }
                },
                series: series
            }
            myChart.setOption(pro)
        }
        
      },
      chartClick: function (params) {
        
      }
    }
  }
</script>
<style scoped>
  
</style>
